×
☰ Borders In HTML CSS And JavaScript 100+

WcCoder

Borders In HTML CSS And JavaScript

Here many types of borders are created in HTML CSS JavaScript.

You can use all these borders anywhere.

All the borders available on this page are auto fit borders. All these borders adjust according to your device.

The width of all the borders present on this page is 80%, if you want you can increase or decrease its width, and the width is auto.

You can make some changes in these borders, Ex:-- Height, Width, Background, Color, Position, Paragraph.

The border-style property specifies the type of border that will be displayed. Valid options for the the border-style are none, dotted, dashed, solid, double, groove, ridge, inset, outset, and inherit. Most of the styles alter the border appearance, but none and inherit are special. Setting the border-style to none disables borders, and inherit uses the border-style inherited from a less-specific selector.

The border-width property specifies how wide the border around a box should be. Borders are usually specified in pixels, but any CSS unit of measurement can be used. To create a 1-pixel, dashed border around all the anchors On a page, you use the following CSS:
a { border-width: 1px; border-style: solid;}

You can also use them to give a better look to text and paragraphs in your website.

WcCoder.com also runs new border projects built from HTML CSS JavaScript.

Input Output
HTML & CSS 89 
                  <table border="0" style="overflow: hidden;position: relative;height: auto;width: 90%;padding: 0px;margin: auto;top: 10px;">
                        <tr>
                            <td style="position: relative">
                                <div style="border: 0px orangered double;padding: 5px;text-align: justify;border: 3px black solid;">
                                 <div style="border: 0px orangered double;padding: 5px;text-align: justify;border: 3px black dashed;">  
                                    <div style="border: 0px orangered double;padding: 25px;text-align: justify;border: 3px black solid;">
                                       
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                          proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 

                                       </div>
                                 </div>
                                 <div style="position:  absolute;height: 0%;width: 50%;border-bottom: 3px black solid;top: 7.5px;left: 25%;">
                                 </div>
                                 <div style="position:  absolute;height: 50%;width: 0%;border-right: 3px black solid;right: 7px;top: 25%;">
                                 </div>
                                 <div style="position:  absolute;height: 0%;width: 50%;border-top: 3px black solid;bottom: 7px;left: 25%;">
                                 </div>
                                 <div style="position:  absolute;height: 50%;width: 0%;border-right: 3px black solid;left: 7.5px;top: 25%;">
                                 </div>   
                                </div>
                            </td>
                        </tr>
                    </table>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
HTML & CSS 90 
                  <table border="0" style="overflow: hidden;position: relative;height: auto;width: 90%;padding: 0px;margin: auto;top: 10px;">
                        <tr>
                            <td style="position: relative">
                                <div style="border: 0px orangered double;padding: 15px;text-align: justify;border: 3px red solid;">
                                 <div style="border: 0px orangered double;padding: 15px;text-align: justify;border: 3px red dashed;">  
                                    
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                          proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 

                                       </div>
                                 </div>
                                    <div style="position:  absolute;height: 0%;width: 50%;border-bottom: 3px red solid;top: 8px;left: 25%;">
                                    </div>
                                    <div style="position:  absolute;height: 50%;width: 0%;border-right: 3px red solid;right: 8px;top: 25%;">
                                    </div>
                                    <div style="position:  absolute;height: 0%;width: 50%;border-top: 3px red solid;bottom: 7.5px;left: 25%;">
                                    </div>
                                    <div style="position:  absolute;height: 50%;width: 0%;border-right: 3px red solid;left: 7px;top: 25%;">
                                    </div>   
                                </div>
                            </td>
                        </tr>
                    </table>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
HTML & CSS 101 
                  <table border="0" style="overflow: hidden;position: relative;height: auto;width: 90%;padding: 0px;margin: auto;top: 10px;box-shadow: 0px 0px 6px 2px rgba(18, 0, 44, 1.0);">
                        <tr>
                            <td style="position: relative">
                                <div style="padding: 10px;text-align: justify;border: 3px black solid;">
                                 <div style="padding: 10px;text-align: justify;border: 3px black solid;">  
                                    <div style="padding: 25px;text-align: justify;border: 0px black solid;">
                                       
                                          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                          proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 

                                       </div>
                                 </div>
                                 <div style="position:  absolute;height: 10px;width: 85%;border-bottom: 4px black solid;top: 6px;left: 7.5%;">
                                 </div>
                                 <div style="position:  absolute;height: 85%;width: 10px;border-left: 4px black solid;top: 7.5%;right: 6px;">
                                 </div>
                                 <div style="position:  absolute;height: 10px;width: 85%;border-top: 4px black solid;bottom: 6px;left: 7.5%;">
                                 </div>
                                 <div style="position:  absolute;height: 85%;width: 10px;border-right: 4px black solid;left: 6px;top: 7.5%;">
                                 </div> 
                                </div>
                            </td>
                        </tr>
                    </table>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.